<template>
  <div class="nb-box i-border-bottom" :style="{backgroundColor:bgColor}">
    <div class="nb-left">
      <slot name="left"></slot>
    </div>
    <div class="nb-middle">
      <slot name="middle"></slot>
    </div>
    <div class="nb-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "NavBar",
    props:{
      bgColor:{
        type:String,
        default:'#fff'
      }
    }
  }
</script>

<style scoped>
  .nb-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0;
    justify-content: space-between;
    padding: 0.6rem var(--padding-normal);
    z-index: 1;
  }

  .nb-left{
    width: 3rem;
    max-width: 3rem;
    display: flex;
  }
  .nb-middle {
    text-align: center;
    flex: 1;
  }
  .nb-right {
    width: 3rem;
  }
  .i-border-bottom{
    border-bottom: 10px solid #fafafa;
  }
</style>
